<template>
  <view class="search-outter" :class="filter.length ? 'h-184' : 'h-92'">
    <view class="search-inner">
      <icon type="search" :size="14" color="#888" />
      <input
        type="text"
        :placeholder="placeholder"
        :value="modelValue"
        @input="updateValue"
      />
      <view class="btn" @tap="search()">搜索</view>
    </view>
    <view class="search-filter">
      <view
        class="filter"
        v-for="(item, index) in filter"
        :key="index"
        @tap="showMesPopup(item.select)"
      >
        <text>{{ item.name }}</text>
      </view>
    </view>

    <!-- 弹窗 -->
    <mes-popup v-model="isShowMesPopup" :form="mesPopupForm"></mes-popup>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    modelValue: String,
    placeholder: String,
    enableClear: {
      type: Boolean,
      default: true
    },
    filter: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'search'],
  setup(props, context) {
    const updateValue = (e) => {
      context.emit('update:modelValue', e.detail.value)
      if (!e.detail.value && props.enableClear) {
        context.emit('search')
      }
    }

    const search = () => {
      context.emit('search')
    }

    let isShowMesPopup = ref(false)
    let mesPopupForm = ref({ select: {} })
    const showMesPopup = (select) => {
      isShowMesPopup.value = true
      mesPopupForm.value.select = select
    }

    return {
      updateValue,
      search,
      isShowMesPopup,
      showMesPopup,
      mesPopupForm
    }
  }
}
</script>

<style lang="less" scoped>
.h-92 {
  height: 92rpx;
}
.h-184 {
  height: 184rpx;
}

.search-outter {
  position: fixed;
  left: 0;
  top: 0;
  width: 750rpx;
  background-color: #f7f7f7;
  z-index: 99;
}
.search-inner {
  display: flex;
  align-items: center;
  width: 702rpx;
  height: 72rpx;
  margin: 0 auto;
  padding: 0 6rpx 0 32rpx;
  background: #ffffff;
  border-radius: 40rpx;
  input {
    flex: 1;
    margin: 0 20rpx;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rpx;
    height: 60rpx;
    background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    border-radius: 40rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
.search-filter {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  .filter {
    height: 72rpx;
    margin-left: 24rpx;
    padding: 0 32rpx;
    text-align: center;
    line-height: 72rpx;
    background: #ffffff;
    border-radius: 40rpx;
    color: #666666;
  }
}
</style>
